<script>
  import $ from 'dfish-widget'
  import Widget from '../Widget.vue'
  import form from '../widget.form.js'

  export default {
    mixins: [Widget],
    data() {
      return {
        name: 'Calendar',
        remark: '日历',
        attrs: [{
          name: 'value',
          type: 'String',
          remark: '日期'
        }, {
          name: 'min-value',
          remark: '最小日期',
          type: 'String',
        }, {
          name: 'max-value',
          remark: '最大日期',
          type: 'String',
        }, {
          name: 'current',
          remark: '聚焦日期',
          type: 'String',
        }, {
          name: 'pad',
          remark: '是否填充空白格',
          type: 'Boolean',
        }, {
          name: 'format',
          remark: '日期格式化',
          type: 'String',
          option: `<div><var>yyyy-MM-dd</var>: 按日显示</div>
            <div><var>yyyy-MM</var>: 按月显示</div>
            <div><var>yyyy</var>: 按年显示</div>
            <div><var>yyyy-ww</var>: 按周显示</div>
          `,
        }, ],
        events: [{
          name: 'click:item',
          remark: '点击单元格时触发',
          option: '(event: Event, item: Object)',
        }, {
          name: 'change',
          remark: '日期翻页时触发',
          option: '(event: Event, date: Date)',
        }],
        slots: [{
          name: 'default',
          remark: '每个日期单元格的显示内容',
          props: '<var>{item}</var>: 单元格提供的变量'
        }, {
          name: 'head',
          remark: '显示在内容之前'
        }],
        examples: [{
          remark: '点击日期单元格的聚焦效果',
          type: 'html',
          view: true,
          code: `
            <template>
              <w-calendar value="2021-10-01" format="yyyy-MM-dd" :current="currentCal" @click:item="clickCal"></w-calendar>
            </template>
            <${'script'}>
              export default {
                data() {
                  return {
                    currentCal: null
                  }
                },
                methods: {
                  clickCal(e, item) {
                    this.currentCal = item.value
                  }
                }
              }
            </${'script'}>
          `,
					comp: {
						data() {
						  return {
						    currentCal: null
						  }
						},
						methods: {
						  clickCal(e, item) {
						    this.currentCal = item.value
						  }
						}
					}
        }, {
          remark: '填充日期单元格的内容',
          type: 'html',
          view: true,
          code: `
            <template>
              <w-calendar value="2021-06-01" format="yyyy-MM-dd">
                <template #default="{item}">
                  <div>{{item.text}}</div>
                  <div style="height:30px;color:salmon">{{list[item.value]}}</div>
                </template>
              </w-calendar>
            </template>
            <${'script'}>
              export default {
                data() {
                  return {
                    list: {
                      "2021-06-01": "1个日程",
                      "2021-06-12": "2个日程" 
                    }
                  }
                }
              }
            </${'script'}>
          `,
					comp: {
						data() {
						  return {
						    list: {
						      "2021-06-01": "1个日程",
						      "2021-06-12": "2个日程"
						    }
						  }
						}
					}
        }]
      }
    }
  }
</script>

<style>
</style>
